<template>
  <div>
    <div>
      <div>
        <span>名称：</span>
        <Input
          v-model="input_Name"
          placeholder="请输入名称"
          style="width: auto; margin-right: 20px"
        />
        <span>类型：</span>
        <Select v-model="model1" style="width:200px; margin-right: 20px" @on-change="optionvalue" >
            <Option v-for="item in selectList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <span>备注：</span>
        <Input
          v-model="input_remarks"
          placeholder="请输入备注"
          style="width: auto; margin-right: 20px"
        />
        <Button
          type="primary"
          icon="ios-search"
          :loading="loading"
          @click="btn_search"
          style="margin-right: 20px"
        >
          <span v-if="!this.loading">查询</span>
          <span v-else>查询中</span>
        </Button>
        <Button icon="md-refresh" @click="reset">重置</Button>
      </div>

      <div style="margin-top: 30px">
        <Button
          type="primary"
          icon="md-add"
          size="large"
          style="margin-right: 10px"
          @click="handleEdit()"
          >增加</Button
        >
        <Button
          type="primary"
          icon="md-log-in"
          size="large"
          style="margin-right: 10px"
          >导入</Button
        >
        <Button
          type="primary"
          icon="md-download"
          size="large"
          style="margin-right: 10px"
          >导出</Button
        >
        <Dropdown v-show="dropdown_show">
          <Button type="primary" size="large">
            批量操作
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem><Icon type="ios-trash" /> 删除</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <el-dialog :title="modeltitle" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="名称:" :label-width="formLabelWidth">
              <el-input
                v-model="form.projectName"
                autocomplete="off"
                style="width: auto"
              ></el-input>
            </el-form-item>
            <el-form-item label="类型:" :label-width="formLabelWidth">
              <Select v-model="form.sid" style="width:200px; margin-right: 20px" @on-change="optionvalue" size="large">
                <Option v-for="item in selectList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </el-form-item>
            <el-form-item label="备注:" :label-width="formLabelWidth">
              <el-input
                v-model="form.remarks"
                autocomplete="off"
                style="width: auto"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialog_click">确 定</el-button>
          </div>
        </el-dialog>
      </div>

      <div>
        <el-table
          v-loading="table_loading"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>

          <el-table-column property="projectName" label="名称">
          </el-table-column>
          <el-table-column property="erpState.stateName" label="类型">
          </el-table-column>
          <el-table-column property="remarks" label="备注">
          </el-table-column>
          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button size="mini" type="danger"
                @click="handleDelete(scope.$index,scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <Page
          @on-change="tableData_query"
          :total="total"
          show-total
          :page-size="pagesize"
          style="float: right"
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      table_loading: true,
      input_Name: "",
      selectValue:"",
      input_remarks:"",
      loading: false,
      tableData: [],
      total: 0,
      currentPage: 1,
      pagesize: 7,
      dropdown_show: false,
      selectionData: [],
      modeltitle: "",
      dialogFormVisible: false,
      form: {
        id: "",
        projectName: "",
        sid:'',
        remarks: "",
      },
      formLabelWidth: "120px",
      selectList:[
          {
              value:9,
              label:"支出"
          },
          {
              value:10,
              label:"收入"
          }
      ],
      model1: '',
    };
  },
  created() {
    this.tableData_query();
  },
  methods: {
    optionvalue(value){
      if(value==undefined){
        this.selectValue = ""
      }else{
        this.selectValue = value
      }
        console.log(this.selectValue)
    },
    //查询方法
    btn_search() {
      this.loading = true;
      this.tableData_query();
      this.loading = false;
    },
    //重置方法
    reset() {
      this.model1 =''
      this.input_Name = "";
      this.selectValue = "";
      this.input_remarks = "";
    },
    //table数据
    tableData_query(currentPage) {
      if (currentPage != null) {
        this.currentPage = currentPage;
      }
      axios
        .post(
          "http://localhost:8082/fun/queryAll?name=" +
            this.input_Name +
            "&sid="+
            this.selectValue+
            "&remarks=" +
            this.input_remarks +
            "&page=" +
            this.currentPage +
            "&limit=" +
            this.pagesize
        )
        .then((res) => {
          console.log(res.data);
          this.tableData = res.data.list;
          this.total = res.data.count;
          this.table_loading = false;
        });
    },
    handleSelectionChange(rows) {
      this.dropdown_show = true;
      this.selectionData = rows;
      console.log(this.selectionData);
      if (rows.length == 0) {
        this.selectionData = [];
        this.dropdown_show = false;
      }
    },
    handleEdit(index, row) {
      if (row != null) {
        console.log(row);
        this.dialogFormVisible = true;
        this.modeltitle = "修改";
        this.form.id = row.id;
        this.form.projectName = row.projectName;
        this.form.sid = row.sid
        this.form.remarks = row.remarks;
      } else {
        this.modeltitle = "新增";
        this.dialogFormVisible = true;
        this.form = {};
      }
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm('此操作将永久删除该供应商, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post("http://localhost:8082/fun/delteById?id="+row.id).then(res=>{
            if(res!=0){
              this.tableData_query();
              this.$notify({
                title: "成功",
                message: "成功删除",
                type: "success",
                duration: 4500,
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    dialog_click() {
      if (this.modeltitle == "新增") {
        axios
          .post("http://localhost:8082/fun/insertFun", this.form)
          .then((res) => {
            if (res.data > 0) {
              this.dialogFormVisible = false;
              this.tableData_query();
              this.$notify({
                title: "成功",
                message: "添加成功",
                type: "success",
                duration: 4500,
              });
            }
          });
      } else {
        axios
          .post("http://localhost:8082/fun/updateFun", this.form)
          .then((res) => {
            if (res.data > 0) {
              this.dialogFormVisible = false;
              this.tableData_query();
              this.$notify({
                title: "成功",
                message: "修改成功",
                type: "success",
                duration: 4500,
              });
            }
          });
      }
    },
  },
};
</script>
<style>
.el-form-item {
  display: inline-block;
}
</style>

